<template>
  <div class="login_container">
    <div class="login_box">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        auto-complete="on"
        label-position="left"
      >
        <div class="title-container">
          <span class="title-bg"></span>
          <div class="line-tag"></div>
          <span class="title">智能化系统</span>
        </div>
        
        <el-form-item prop="username">
          <div class="input_place">账号</div>
          <el-input
            ref="username"
            v-model="loginForm.username"
            name="username"
            type="text"
            tabindex="1"
            auto-complete="off"
          />
        </el-form-item>

        <el-form-item prop="password">
          <div class="input_place">密码</div>
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            name="password"
            tabindex="2"
            auto-complete="off"
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>

        <el-button :loading="loading" class="btn-color" @click.native.prevent="handleLogin">登录</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名！", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码！", trigger: "blur" }]
      },
      loading: false,
      passwordType: "password",
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      // this.$router.push({ path: "/home" });
      this.$refs.loginForm.validate(async valid => {
        if (valid) {
          this.loading = true;

          const { data: res } = await this.$http.post(
            "admin/loginUser",
            this.loginForm
          );
          if (res.data) {
            window.localStorage.setItem("token", res.data.token);
            window.sessionStorage.setItem("mytoken", res.data.token);
            localStorage.setItem("timestamp", new Date().getTime());
            
            setTimeout(() => {
              this.$router.push({ path: "/home" });
            }, 500);
          } else {
            this.$message.error({
              message: res.message,
              duration: 1000
            });
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.login_container {
  height: 100vh;
  background: url("../assets/img/login-bj.jpg") no-repeat;
  background-size: 100% 100%;
}
.login_box {
  width: 8rem;
  height: 8.25rem;
  background: url("../assets/img/login-border.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  right: 25%;
  transform: translate(50%, -50%);
}
.title-container {
  display: flex;
  width: 100%;
  margin: 1.1rem 0;
  justify-content: center;
  align-items: center;
}
.el-form-item {
  margin: 0.375rem auto;
  width: 5.5rem;
  height: 0.75rem;
  position: relative;
  // border: 1px solid #00b4ff;
  // border-radius: 30px;
}
.input_place {
  position: absolute;
  width: 1.125rem;
  height: 0.3rem;
  // border-right: 1px solid #eee;
  line-height: 0.3rem;
  font-size: 0.225rem;
  color: #eee;
  top: 50%;
  transform: translateY(-50%);
}
/deep/ .el-input__inner {
  width: 5.5rem;
  height: 0.75rem;
  border: 1px solid #00b4ff;
  border-radius: 0.375rem;
  background: transparent;
  font-size: 0.25rem;
  color: #ffffff;
  padding-left: 1.125rem;
}
.title-bg {
  width: 2.2125rem;
  height: 0.7rem;
  background: url("../assets/img/csotlogo.png") no-repeat center;
  background-size: 100% 100%;
  display: block;
}
.title {
  height: 0.7rem;
  font-size: 0.45rem;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.7rem;
}
.line-tag {
  width: 1px;
  height: 0.425rem;
  background: #ffffff;
  margin: 0 0.375rem;
}
.btn-color {
  width: 5.5rem;
  height: 0.825rem;
  margin: 0.5rem auto;
  background: linear-gradient(0deg, #1bfff7, #0291ff);
  box-shadow: 0px 0.25rem 0.3rem 0px #093b71;
  border-radius: 0.4rem;
  font-size: 0.3rem;
  font-weight: bold;
  color: #ffffff;
}
</style>
